<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table border stripe :data="skuList">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" width="100" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" width="350">
        <template v-slot="{ row }">
          <el-button
            v-if="row.isSale === 0"
            size="small"
            type="info"
            title="上架"
            icon="ele-Top"
            @click="up(row)"
          ></el-button>
          <el-button
            v-else
            size="small"
            type="success"
            title="下架"
            icon="ele-Bottom"
            @click="down(row)"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            title="修改"
            icon="ele-Edit"
            @click="edit(row)"
          ></el-button>
          <el-button
            size="small"
            type="info"
            title="详情"
            icon="ele-InfoFilled"
            @click="showDetail(row)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            title="删除"
            icon="ele-Delete"
            @click="deleteSku(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 
      category3Id:61
      createTime:"2022-09-06 15:08:31"
      id:610
      isSale:0
      price:11
      skuAttrValueList:null
      skuDefaultImg:""
      skuDesc:"1"
      skuImageList:null
      skuName:"111"
      skuSaleAttrValueList:null
      spuId:916
      tmId:491
      weight:"11.00"


     -->
    <el-pagination
      v-model:page-size="limit"
      v-model:current-page="page"
      :page-sizes="[10, 15, 17, 19]"
      :pager-count="5"
      layout="prev, pager, next,sizes"
      :total="total"
    />

    <el-drawer
      v-model="drawer"
      size="50%"
      :with-header="false"
      @close="closeDrawer"
    >
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuDetail.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuDetail.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuDetail.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag v-for="item in skuDetail.skuAttrValueList" :key="item.id">
            {{ item.attrName }}-{{ item.valueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag v-for="item in skuDetail.skuSaleAttrValueList" :key="item.id">
            {{ item.saleAttrName }}-{{ item.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel trigger="click" height="450px">
            <el-carousel-item
              v-for="item in skuDetail.skuImageList"
              :key="item.id"
            >
              <img :src="item.imgUrl" width="450" height="450" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import {
  requestSkuList,
  requestcancelSale,
  requestOnSale,
  requestDeleteSku,
  requestFindById,
} from "@/api/sku";
import type { SkuInfoListType, SkuInfoItemType } from "@/api/sku";
import { ElMessage } from "element-plus";

const page = ref(1);
const limit = ref(10);
const total = ref(0);

//初始化skuList数据
const skuList = ref<SkuInfoListType>([]);

//封装一个请求列表的函数
const getSkuList = async () => {
  try {
    const result = await requestSkuList(page.value, limit.value);
    skuList.value = result.records;
    total.value = result.total;
  } catch (e) {
    ElMessage.error("请求列表数据失败");
  }
};

onMounted(() => {
  //初始化请求
  getSkuList();
});

watch([page, limit], () => {
  //初始化请求
  getSkuList();
});

//上架
const up = async (row: SkuInfoItemType) => {
  try {
    await requestOnSale(row.id as number);
    ElMessage.success("上架成功");
    getSkuList();
  } catch (e) {
    ElMessage.error("上架失败");
  }
};

//下架
const down = async (row: SkuInfoItemType) => {
  try {
    await requestcancelSale(row.id as number);
    ElMessage.success("下架成功");
    getSkuList();
  } catch (e) {
    ElMessage.error("下架失败");
  }
};

//编辑
const edit = (row: SkuInfoItemType) => {
  ElMessage.info("正在开发中....");
};

//删除
const deleteSku = async (row: SkuInfoItemType) => {
  try {
    await requestDeleteSku(row.id as number);
    ElMessage.success("删除成功");
    getSkuList();
  } catch (e) {
    ElMessage.error("删除失败");
  }
};

//抽屉
const drawer = ref(false);
const skuDetail = ref<SkuInfoItemType>({
  price: 0,
  skuName: "",
  skuDesc: "",
  weight: "",
  category3Id: null,
  skuDefaultImg: "",
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});
const showDetail = async (row: SkuInfoItemType) => {
  try {
    drawer.value = true;
    const result = await requestFindById(row.id as number);
    skuDetail.value = result;
  } catch (e) {
    ElMessage.error("查询失败");
    drawer.value = false;
  }
};
const closeDrawer = () => {
  skuDetail.value = {
    price: 0,
    skuName: "",
    skuDesc: "",
    weight: "",
    category3Id: null,
    skuDefaultImg: "",
    skuImageList: [],
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
  };
};
</script>
